<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文件列表</title>
    <link
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
  </head>
  <body>
    <h1>文件列表</h1>
    <form action="" ">
      <div class="class="input-group mb-8">
        请输入文件夹名称：<input type="text" class="form-control" id="dir" />
        <input
        type="button"
        value="提交"
        class="btn btn-success"
        id="submit-dir"
      />
      </div>

  
    </form>
    <hr />
    <table id="file-list" class="table table-striped table-hover">
      <tbody>
        <tr>
          <td>文件名称</td>
          <td>文件类型</td>
        </tr>
      </tbody>
    </table>
    <script>
      const tbody=document.querySelector("tbody");
      $("#submit-dir").click(function () {
        //获取数据,并封装参数
        let dir = { dir: $("#dir").val() };
        // let data = JSON.stringify(dir);
        // console.log(data);
        $.ajax({
          url: "http://xk.njpi/filelist.php",
          method: "POST",
          data: dir,
          success: function (res) {
            //res转换为json对象
            const result = JSON.parse(res);
            const files = result.data;
            console.log(files);
            for (file of files) {
              let fileType = "";
              if (typeof file == "string") {
                fileType = "文件";
              } else {
                fileType = "目录";
              }
              const tr = document.createElement("tr");
              const td=document.createElement("td");
              td.innerHTML=file
              tr.appendChild(td);
              const td2=document.createElement("td");
              td2.innerHTML=fileType
              tr.appendChild(td2);
              //使用jquery 创建tr，td，对td进行赋值
              //把tr append到tbody中
              tbody.appendChild(tr);
            }
          },
        });
      });
    </script>
  </body>
</html>
